<template>
  <a-calendar ref="table"  v-model:value="value" @panelChange="onPanelChange" @select="formRef.showModal(value)" >
    <template #dateCellRender="{ current }" >
      <a-tag :color="isHoliday(current)? '#e4393c' : '#13c2c2'">
        {{isHoliday(current)?'休':'工'}}
      </a-tag>
    </template>
  </a-calendar>

	<Form ref="formRef" @child-event="handleEvent" @successful="table.refresh()"  />
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import { Dayjs } from 'dayjs';
import Form from './form.vue'
import hoildaysapi from '@/api/base/Hoildays/hoildaysapi'


const handleEvent = () => {
  console.log('子组件触发了父组件方法')
  gethoilday()
}


const table=ref()
const formRef:any = ref()
const value = ref<Dayjs>();
const yearMonth=ref()
const onPanelChange = (value: Dayjs, mode: string) => {
  
};

const hoilday:any=ref([])
const ishoilday:any=ref([])
const gethoilday=()=>{
   hoildaysapi.getHolidays({yearMonth:yearMonth.value}).then(res=>{
    hoilday.value=res; 
    ishoilday.value=hoilday.value.map((item:any)=>{
      return item.date.substring(0,10)
    })
  })
}


const isHoliday=(value:any)=>{
  const date=value.format('YYYY-MM-DD')
  return ishoilday.value.includes(date)
}


onMounted(()=>{
  gethoilday()
})



</script>